<script src="../assets/js/home.js">
</script>

<style scoped>
@import '../assets/css/home.css';
</style>


<template>
  <el-container>
    <el-aside width="220px">
      <!-- <el-row class="tac"> -->
      <!-- <el-col :span="12"> -->
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse" :router="true">
        <div class="picture"><img class="logo" src="../assets/img/logo.png" alt=""></div>
        <el-menu-item index="/">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/book">
          <i class="el-icon-menu"></i>
          <span slot="title">图书管理</span>
        </el-menu-item>
        <el-menu-item index="/borrow">
          <i class="el-icon-document"></i>
          <span slot="title">借阅中心</span>
        </el-menu-item>
        <el-menu-item index="/user">
          <i class="el-icon-setting"></i>
          <span slot="title">用户中心</span>
        </el-menu-item>
        <el-menu-item index="/system">
          <i class="el-icon-setting"></i>
          <span slot="title">系统设置</span>
        </el-menu-item>

      </el-menu>

    </el-aside>
    <el-container style="min-height: 100vh;">

      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
        </el-breadcrumb>
        <div class="fr">
          <!-- <img class="logo" src="../assets/img/logo.png" alt=""> -->
          <el-header>
            <el-dropdown>
              <i style="margin-right: 15px"><el-row class="demo-avatar demo-basic">
                  <el-col :span="12">
                    <div class="sub-title"></div>
                    <div class="demo-basic--circle">
                      <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
                      <!-- <div class="block" v-for="size in sizeList" :key="size">
                        <el-avatar :size="size" :src="circleUrl"></el-avatar>
                      </div> -->
                    </div>
                  </el-col>
                </el-row></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
                <!-- <el-dropdown-item>删除</el-dropdown-item> -->
              </el-dropdown-menu>
            </el-dropdown>
            <span>王小虎</span>
          </el-header>
        </div>
      </el-header>

      <el-main style="min-height: 100vh;">
        <div class="search">
          <el-dropdown>
            <el-button type="primary" size="small">
              请选择 &nbsp;<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>图书名称</el-dropdown-item>
              <el-dropdown-item>图书作者</el-dropdown-item>
              <el-dropdown-item>图书类型</el-dropdown-item>
              <el-dropdown-item>图书描述</el-dropdown-item>
              <!-- <el-dropdown-item>图书馆</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
          <el-input placeholder="请输入搜索内容" v-model="input" clearable></el-input>
          <el-button class="el-icon-zoom-in" type="primary" style="margin-left: 10px;">搜索</el-button>
          <el-button class="el-icon-circle-plus" type="success" @click="addbook()">新增图书</el-button>

        </div>
        <el-table :data="tableData">
          <el-table-column label="选择" width="70">
            <!-- <el-checkbox label=""></el-checkbox> -->
            <template slot-scope="scope">
              <el-checkbox v-model="selectedBooks" :value="scope.row.bookId"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="bookId" label="图书ID" width="120">
          </el-table-column>
          <el-table-column prop="bookName" label="图书名称" width="180">
          </el-table-column>
          <el-table-column prop="author" label="图书作者" width="180">
          </el-table-column>
          <el-table-column prop="bookTypeName" label="图书类型" width="120">
          </el-table-column>
          <el-table-column prop="address" label="图书馆" width="140">
          </el-table-column>
          <el-table-column prop="description" label="图书描述" width="240">
          </el-table-column>
          <el-table-column prop="status" label="图书状态" width="120">
          </el-table-column>
          <el-table-column prop="control" label="操作">
            <template slot-scope="scope">
              <div class="bt">
                <el-button @click="edit(scope.row)" class="el-icon-edit" type="primary" size="mini">编辑</el-button>
                <el-button class="el-icon-delete" type="danger" size="mini"
                  @click="deleteBook(scope.row.bookId)">删除</el-button>
                <!-- <el-button class="el-icon-document-checked" type="warning" size="mini" @click="borrow()">借阅</el-button> -->
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <span class="demonstration"></span>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[2, 5, 10, 20]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
        <!-- 对话框 -->
        <el-dialog title="更新/添加图书" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="图书名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图书作者" :label-width="formLabelWidth">
              <el-input v-model="form.author" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图书类型" :label-width="formLabelWidth">
              <el-input v-model="form.bookTypeName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图书地址" :label-width="formLabelWidth">
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图书描述" :label-width="formLabelWidth">
              <el-input v-model="form.description" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图书状态" :label-width="formLabelWidth">
              <el-select v-model="form.status" placeholder="请选择图书状态">
                <el-option label="已借出" value="已借出"></el-option>
                <el-option label="可借阅" value="可借阅"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="submit()">更新/添加</el-button>
          </div>
        </el-dialog>
      </el-main>

      <!-- <el-footer>友情链接</el-footer> -->
    </el-container>
  </el-container>
</template>